<template>
  <div class="managerMana-container common-container">
    <div class="common-top">
      <span class="left">公司管理</span>

      <el-button type="primary" @click="toModify('add')">添加</el-button>
    </div>
    <div class="common-bot">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="名称" width="200"></el-table-column>
        <el-table-column prop="province" label="省份">
          <template slot-scope="scope">
            <span>{{ formatCity(scope.row.province, "province") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="城市">
          <template slot-scope="scope">
            <span>{{ formatCity(scope.row.city, "city") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="enable" label="是否启用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enable"
              @change="modifyEnable(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <span
              class="span-modify edit"
              @click.stop="doModify('edit', scope.row)"
              >编辑</span
            >
            <span
              class="span-modify del"
              @click.stop="doModify('del', scope.row)"
              >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-if="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="totalElement"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import ManaApi from "@/api/index";
import { CodeToText } from "element-china-area-data";

export default {
  name: "ManagerMana",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      showPage: false,
      tableData: [],
      enable: 0,
      keyword: "",
      limit: 10,
      nowPage: 1,
      roleGroupId: 0,
      gender: {
        female: "女",
        male: "男",
      },
      totalElement: 0,
      CodeToText,
    };
  },
  watch: {
    nowPage(val) {
      this.getData();
      this.setStateData(val);
    },
    limit(val) {
      this.getData();
    },
  },
  methods: {
    formatCity(item, type) {
      if (!item) {
        return "---";
      }
      console.log(item);
      let info = JSON.parse(JSON.stringify(item));
      let addr = info.split(",");
      console.log(addr);
      console.log(CodeToText);
      if (type == "province") {
        return CodeToText[addr[0]];
      } else {
        return CodeToText[addr[1]];
      }
    },
    setStateData(nowPage) {
      let stateData = {
        nowPage,
      };
      this.$router.replace({
        path: this.$route.path,
        query: {
          stateData: this.$base64.encode(JSON.stringify(stateData)),
        },
      });
    },
    handleSizeChange(val) {
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.nowPage = val;
    },
    modifyEnable(item) {
      ManaApi.company
        .enable({
          targetId: item.id,
          yes: item.enable ? true : false,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功");
            this.getData();
          }
        });
    },
    doModify(type, item) {
      if (type == "edit") {
        this.$router.push({
          name: "companyModify",
          query: { type, id: item.id },
        });
      } else {
        this.$confirm("确认此操作?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          ManaApi.company.del({ targetIds: [item.id] }).then((res) => {
            if (res.code == 200) {
              this.$message.success("操作成功");
              this.getData();
            }
          });
        });
      }
    },
    toModify(type) {
      this.$router.push({ name: "companyModify", query: { type } });
    },
    getData() {
      ManaApi.company
        .list({
          limit: this.$normalMaxLimit,
          page: this.nowPage - 1,
          type: "store",
        })
        .then((res) => {
          this.tableData = res.data;
          this.totalElement = res.total;
          this.showPage = true;
        });
    },
  },
  mounted() {
    if (this.$route.query.stateData) {
      console.log(JSON.parse(this.$base64.decode(this.$route.query.stateData)));
      const stateData = JSON.parse(
        this.$base64.decode(this.$route.query.stateData)
      );
      this.nowPage = stateData.nowPage;
      this.getData();
    } else {
      this.getData();
    }
  },
};
</script>

<style lang="scss" scoped></style>
